<template>
  <div class="withdrawals">
    <div class="search">
      <div>
        <label>状态</label>
      </div>
      <div>
        <el-select v-model="params.flowStatus" @change='changeSelect' placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 90%">
      <el-table-column label="充值金额">
        <template slot-scope="scope">
          <span>{{getWithDrawal(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式">
        <template slot-scope="scope">
            <span>{{ getPayType(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
            <span>{{ getStatus(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="充值时间">
        <template slot-scope="scope">
          <!-- {{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}') }} -->
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      class='pagination'
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>


<script>
import {ajax} from '@/api';
import { parseTime } from '@/utils';
import {getToken} from "@/utils/auth";
import numberFormat from '@/api/numberFormat';
export default {
  name: "withdrawals",
  data() {
    return {
      tableData: [
        {
          money: 5432,
          type: "微信支付",
          identity: "成功",
          timer: "2018.12.23 12:32:34"
        }
      ],
      value: "",
      total:0,
      options:[{//充值记录
        text:'全部',
        value:''
      },{
        text:'成功',
        value:'success'
      },{
        text:'失败',
        value:'failed'
      }],  
      params:{
        targetUserId:'',
        keyword:'',
        operateType:'recharge',
        flowStatus:'',
        start:0,
        limit:10,
        token:getToken()
      }
    }
  },
  methods:{

    changeSelect(){
      this.getData();
    },
    getBill(){
      this.params.targetUserId = this.$route.params.id;
      this.getData();
    }, 
    getData(){
      ajax('userFlows',this.params).then((res) => {
          if(res.status === 200){
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        });
    },
    getPayType(data){
      return data.payType.text;
    },
    getStatus(data){
      return data.flowStatus.text;
    },
    getWithDrawal(data){
      return numberFormat.showDecimal(data.offset);
    },
    handleCurrentChange(val){
      this.params.start = (val - 1) * this.params.limit;
      this.getData();
    }
  }
};
</script>


<style lang="less" scoped>
.withdrawals {
      margin-top: 1rem;
  .imgBox {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50px;
    }
  }

  .search {
    display: flex;
    margin: 0 0 1rem 0;
    div:first-child {
        display: flex;
        width: 3rem;
        align-items: center;
        label{
            font-weight: 400;
        }
    }
    div:last-child{
        div{
            width: inherit;
        }
    }
    .input {
      margin: 0 0.4rem 0 0.3rem;
    }
  }
  .pagination{
      width: 90%;
      margin: 1rem 0;
      text-align: right;
  }
}
</style>
